<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>约战平台</title>
  <meta name="viewport" content="initial-scale=1, maximum-scale=1">
  <link rel="shortcut icon" href="http://favicon.ico">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <!--导入css文件（CDN与本地）-->
  <%--引入sui mobile 框架的css文件--%>
  <link rel="stylesheet" href="<%=request.getContextPath()%>/resources/css/sm.min.css">
  <link rel="stylesheet" href="<%=request.getContextPath()%>/resources/css/sm-extend.css">
  <%--引入本地的css文件--%>
  <link rel="stylesheet" href="<%=request.getContextPath()%>/resources/css/index.css">


</head>
<body>
<div class="page-group">
  <div class="page page-current">

    <!-- 你的html代码 -->

    <%--顶部导航栏--%>
    <header class="bar bar-nav" style="background-color:#fff;border-bottom-color:#fff;">
      <a class="icon icon-me pull-left open-panel"></a>

      <h1 class="title" style="color:#000;"> 线上足球约战</h1>
    </header>
    <div class="bar bar-header-secondary">
      <form method="post" action="<%=request.getContextPath()%>/team/team/select">
        <div class="searchbar">
          <input type="submit" value="搜索" class="searchbar-cancel"></input>
          <div class="search-input">
            <label class="icon icon-search" for="search"></label>
            <input type="text" id='search' name="teamName" placeholder='输入球队名...'/>
          </div>
        </div>
      </form>
    </div>


    <div class="content">
      <%------------------球队显示界面-----------------------%>
      <div class="content-block">
        <div class="tabs">
          <div id="tab3" class="tab active">
            <div class="content-block">
              <%--foreach循环遍历约战记录中已经确认的记录--%>
              <c:forEach var="team" items="${singleTeam}">
                    <div class="card">
                        <%--卡片卡卡头开始--%>
                      <div class="card-header" style="text-align: center;">
                        <div style="text-align: center !important;width: 100%;">
                          <h2>${team.teamName}</h2>
                        </div>
                      </div>
                        <%--卡片卡卡头结束--%>
                        <%--卡片的中心内容开始--%>
                      <div class="card-content">
                        <div class="card-content-inner">

                          球队简介：${team.teamSummary}<br/>
                          球队领队：${team.teamLeader}<br/>
                          球队队长：${team.teamCaptain}<br/>
                          所在地区：${team.teamArea}
                        </div>
                      </div>
                        <%--卡片的中心内容结束--%>
                        <%--卡片的卡脚部分开始--%>
                      <div class="card-footer">
                        <a href="<%=request.getContextPath()%>/team/team/map" class="sui-btn btn-large btn-primary">地图</a>
                        <a href="<%=request.getContextPath()%>/team/team/addUserTeam/${team.teamId}" class="sui-btn btn-primary btn-lg">约战</a>

                      </div>

                        <%--卡片的卡脚部分结束--%>
                    </div>

              </c:forEach>
            </div>
          </div>
        </div>
      </div>
      <%------------------该tab键所指的内容结束-----------------------%>
    </div>

    <!-- 底部工具栏 -->
    <nav class="bar bar-tab">
      <%--首页按钮--%>
      <a class="tab-item external  active" href="<%=request.getContextPath()%>/">
        <span class="icon icon-home"></span><%--引用css中首页图片的样式--%>
        <span class="tab-label">首页</span>
      </a>
      <%--球队简介按钮--%>
      <a class="tab-item external" href="<%=request.getContextPath()%>/team/team/list">
        <span class="icon icon-menu"></span><%--引用css中简介图片的样式--%>
        <span class="tab-label">球队</span>
      </a>
      <%--队员管理按钮--%>
      <a class="tab-item external" href="<%=request.getContextPath()%>/team/member/list">
        <span class="icon icon-card"></span><%--引用css中记录图片的样式--%>
        <span class="tab-label">队员</span>
      </a>
      <%--约战记录按钮--%>
      <a class="tab-item external " href="<%=request.getContextPath()%>/challenge/Challenge/receive">
        <span class="icon icon-settings"></span><%--引用css中管理图片的样式--%>
        <span class="tab-label">约战</span>
      </a>
    </nav>
  </div>
</div>
<%--通过sui mobile 框架引入侧栏--%>
<div class="panel panel-left panel-reveal" style="background-color:ivory;"><%--引入css样式--%>
  <div class="content-block">
    <p><a href="#" class="close-panel" style="color:u;">返回</a></p>
    <img src="<%=request.getContextPath()%>/resources/image/logo.png" style="margin-left: 20%;"/><br/><br/><br/>
    <form id="form-msg" class="sui-form form-horizontal" novalidate="novalidate" action="/login" method="post">
      <div class="control-group">
        <label for="inputEmail" class="control-label"></label>
        <div class="controls">
          <input type="text" id="inputEmail" name="username" placeholder="手机号码登录" data-rules="required|email" style="border:1px solid darkgrey;font-size:26px;width:96%;">
        </div>
      </div><p></p>
      <div class="control-group">
        <label for="inputPassword" class="control-label"></label>
        <div class="controls">
          <input type="password" id="inputPassword" name="password" placeholder="密码" title="密码" data-rules="required|minlength=8|maxlength=12" style="border:1px solid darkgrey;font-size:26px;width:96%;">
        </div>
      </div><br/>

      <p><input type="submit" class="button  button-danger" value="登录"/></p>

      <p><a href="<%=request.getContextPath()%>/user/add" class="button button-warning">注册</a></p>

    </form>
    <!-- Click on link with "close-panel" class will close panel -->
  </div>
</div>

<%--引入sui mobile 框架的js文件--%>
<script type='text/javascript' src='http://g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
<script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>

</body>
</html>
